<template>
  <div>
    <h1>playground</h1>
    <!-- 练习父子通讯
      父亲给儿子钱花 100
      儿子可以花10块钱
      子传父，事件名，不能用连字符 写的驼峰 就要用驼峰
     -->
    <!-- 在子传父中，$event指的是子传父的数据 -->
    <!-- .sync 语法糖 （放权 - 儿子交给你了随便改）
      父传子 props 儿子能直接改父亲的数据吗？ 违反单项数据流
      子传父，交给父亲去改数据 （父亲还有权限权利去管）
      1. 儿子子传父的事件名 必须是update:xxx (xxx指的就是父亲要放权的字段)
      2. this.$emit('事件名', 参数) 参数不能省略，父亲放权给你，你需要改的数据必须要传
      3. 这样你就可以省略监听事件，直接在放权的字段后面加个.sync
     -->
    <!-- <son-comp :money="money" @update:money="costMoneyFn(1,'2',true, $event)" /> -->
    <!-- <son-comp :money="money" @update:money="costMoneyFn($event)" /> -->

    <!-- 上下两种是等价的写法  -->
    <!-- <son-comp :money="money" @update:money="money = $event" /> -->
    <son-comp :money.sync="money" />
  </div>
</template>

<script>
import SonComp from './components/son-comp.vue'
export default {
  components: { SonComp },
  data() {
    return {
      money: 100
    }
  },
  methods: {
    costMoneyFn(value) {
      console.log('儿子传给父亲的', value)
      if (value < 80) {
        alert('花太多了，过几天在给你花')
      } else {
        this.money = value
      }
    }
  }
}
</script>

<style>

</style>
